<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
     <!-- 引入Vue 全局注册一个名为Vue的构造函数 -->
 <script src="./js/vue.js"></script>
 <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <title>计算属性</title>
</head>
<body>

    <!-- 计算属性对页面中的数据进行操作 -->
    <div id="app">
        <p>当前时间：{{getCurrentTime()}}</p>
        <p>当前时间属性{{getCurrentTime1}}</p>
        <input type="text" v-model="message">
        <p>{{Number(num) * 100}}%</p>
        <p>{{reverseMessage}}</p>

        姓：<input type="text" v-model="firstname"><br>
        名: <input type="text" v-model="lastname"><br>
        姓名：<input type="text" v-model="fullName"><br>
    </div>

    <script>
        var app=new Vue({
            el:"#app",
            data:{
                firstname:"张",
                lastname:"三",
                num: "0.336",
                name:"",
               message: ''
            },
            methods:{
                getCurrentTime:function(){
                    return Date.now();
                },
                // fullName(){
                //     return this.firstname+'-'+this.lastname;
                // }
            },
        
            //计算属性
            computed:{
                getCurrentTime1:function(){
                    return Date.now();
                },

                reverseMessage: function(){
                   return this.message.split('').reverse('').join('');
                },
                // 完整版
                fullName:{
                    get(){
                        return this.firstname+'-'+this.lastname;
                    },
                    set(value){
                        const arr=value.split('-');
                        this.firstname=arr[0];
                        this.lastname=arr[1];
                        return value;
                    }
                }
                //简写
                // fullName(){
                // return this.firstname+'-'+this.lastname;
                // }
                
            }
               
        })
    </script>
</body>
</html>